<template>
    <div id="theNewsList">
      <div class="fill"></div>
      <the-news v-if="companyNews!==undefined||companyNews!==null" v-for="(list,index) in companyNews" :key="index" :newsContent="list" :wordNum="wordNum" :imgWidth="imgWidth"/>
      <news-load-more/>
      <router-view/>
      <hot-recommendation :hotList="hotList"/>
      <div class="fillLine"></div>
    </div>
</template>

<script>
  import theNews from '@/components/mobile/news/theNews'
  import LoadMore from '@/components/mobile/mall/LoadMore'
  import HotRecommendation from '@/components/mobile/news/HotRecommendation'
  import newsLoadMore from '@/components/mobile/news/newsLoadMore'
    export default {
        name: "theNewsList",
      computed:{
        companyNews:{
          get(){
            let storageData = window.sessionStorage.getItem('companyNewsList');
            if(this.$store.getters.getCompanyNewsList===0&&storageData!=='null'){
              this.$store.dispatch('toChangeCompanyNewsList', storageData);    //同步操作
            }
            return this.$store.getters.getCompanyNewsList;
          },
          set(){}
        },
        lang:{
          get(){
            let storageData = window.sessionStorage.getItem('lang');
            if(this.$store.state.lang!==storageData&&storageData!=='null'){
              this.$store.dispatch('toChangeLang', storageData);    //同步操作
            }
            return this.$store.getters.getLang;
          },
          set(){}
        },
      },
      data(){
          return{
            imgWidth:0,
            wordNum:0,
            hotList:{},
          }
      },
      methods:{
        changeCurrentPageText(route){
          //显示当前页
          let lang=this.lang;
          if(route==='/MallIndex'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','mall');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','商城');
            }
          }
          if(route==='/brandIndex'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','brand');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','品牌');
            }
          }
          if(route==='/CompanyProfileIndex'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','company profileIndex');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','公司介绍');
            }
          }
          if(route==='/theNewsList'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','news list');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','新闻');
            }
          }
          if(route==='/NewsDetails'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','news details');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','新闻详情');
            }
          }
        },
        getScreen:function(){
          this.imgWidth=document.body.clientWidth-20;
          this.wordNum=(this.imgWidth/12)*2;
        },
        getNewsList() {
          this.$store.dispatch('toChangeLoadIngVisible',true);
          let _this = this;
          this.axios.get(domain.url+'news/api/get_news',{
            params:{
              language:_this.lang,
              page:1,
            }
          })
            .then(function (response) {
              let data=response.data;
              //公司新闻
              _this.$store.dispatch('toChangeCompanyNewsList',data.list.data);
              _this.changeCurrentPageText('/theNewsList');
              _this.$store.dispatch('toChangeLoadIngVisible',false);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        getHotRecommendation(){
          let _this = this;
          this.axios.get(domain.url+'news/api/get_hot_news',{
            params:{
              language:_this.lang,
              limit:3,
            }
          })
            .then(function (response) {
              let data=response.data;
              //热点新闻
              _this.hotList=data.list;
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      components:{
        NewsLoadMore:newsLoadMore,
        theNews:theNews,
        LoadMore:LoadMore,
        HotRecommendation:HotRecommendation,
      },
      created(){
        this.getScreen();
        this.getNewsList();
        this.getHotRecommendation();
      }
    }
 </script>

<style scoped>
#theNewsList{
  color:#000;
  background: #f5f5f5;
}
  .fill{
    padding:15px;
    background:rgba(0,0,0,0);
  }
.fillLine{
  width:100%;
  height:10px;
  background: #f5f5f5;
}
</style>
